<template>
  <div class="content">
    <div class="header">
      <div class="btn">
        <a-button type="primary" @click="openModal">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新增</template>
        </a-button>
      </div>
    </div>
    <div class="table">
      <gridTable
        :columns="state.columns"
        :data="state.data"
        :action-func="actionhandle"
        :loading="state.searchLoading"
        :pagination="state.pagination"
        :page-change="pageChange"
      >
      </gridTable>
    </div>
    <!-- 弹出层 -->
    <a-modal
      v-model:visible="state.visible"
      width="auto"
      :mask-closable="false"
      :title="state.isRevise ? '修改咨讯' : '新增咨讯'"
      @cancel="Cancel"
    >
      <div>
        <a-form :model="state.form" auto-label-width>
          <a-row :gutter="16">
            <a-col :span="16">
              <a-form-item field="image" label="标题">
                <a-input v-model="state.form.title" placeholder="输入标题" />
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item field="prove" label="简介">
                <a-textarea
                  v-model="state.form.synopsis"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="16">
              <a-form-item field="content" label="内容">
                <a-textarea
                  v-model="state.form.content"
                  placeholder="请输入"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <div class="foot">
          <a-button :style="{ marginRight: '10px' }" @click="Cancel"
            >取消</a-button
          >
          <a-button type="primary" @click="onOK">提交</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
import {
  Message,
  type TableColumnData,
  type TableData,
  type TableRowSelection,
} from "@arco-design/web-vue";
import gridTable from "@/components/table/gridTable.vue";
import { reactive } from "vue";
import UploadMoudle from "@/components/upload/UploadMoudle.vue";
import { inquiriesApi, uploadApi } from "@/api/index";
import dayjs from 'dayjs'
const renderTime = ({ column, record }) => {
  //  console.log(column.dataIndex);
  //  console.log(record[column.dataIndex]);
  return  dayjs(record[column.dataIndex]).format('YYYY-MM-DD HH:mm:ss')
};

const state = reactive({
  columns: [
    {
      title: "标题",
      dataIndex: "title",
      width:400,
    },
    {
      title: "时间",
      dataIndex: "time",
      render:renderTime,
    },
    {
      title: "操作",
      slotName: "optional",
      width: 100,
      action: [
        // {
        //   text: "详情",
        //   value: "detail",
        // },
        {
          text: "修改",
          value: "revise",
        },
        {
          text: "删除",
          value: "delete",
        },
      ],
    },
  ],
  data: [] as unknown as TableColumnData[],
  pagination: {
    current: 1,
    pageSize: 7,
    total: 0,
  },
  searchLoading: false,
  searchKey: "",
  department: "",
  options: [],
  classifyOptions: [],
  doctorOptions: [],
  visible: false,
  isRevise: false,
  role: "doctor",
  form: {
    id: "",
    synopsis: "",
    content: "",
    title: "",
  },
});
// 分页
const pageChange = (page) => {
  // console.log(page);
  state.pagination.current = page;
};

// 打开Modal
const openModal = () => {
  state.visible = true;
};
// 取消
const Cancel = () => {
  state.visible = false;
  state.isRevise = false;
  state.form = {
    id: "",
    synopsis: "",
    content: "",
    title: "",
  };
};
// 提交
const onOK = () => {
  console.log(state.form);
  if (state.isRevise) {
    inquiriesApi.changeInquiries(state.form)
      .then((res) => {
        console.log(res);
        if (res.code === 200) {
          Message.success({
            content: res.msg || "提交成功",
            position: "top",
          });
          Cancel();
          getCarouselList(null);
        } else {
          Message.error({
            content: res.msg || "error",
            position: "top",
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    inquiriesApi
      .createInquiries(state.form)
      .then((res) => {
        console.log(res);
        if (res.code === 200) {
          Message.success({
            content: res.msg || "提交成功",
            position: "top",
          });

          Cancel();
          getCarouselList(null);
        } else {
          Message.error({
            content: res.msg || "error",
            position: "top",
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
// 操作
const actionhandle = (key, data) => {
  console.log(key, data);
  switch (key) {
    case "detail":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "revise":
      console.log(data);
      state.isRevise = true;
      state.visible = true;
      state.form = data;
      break;
    case "delete":
      deleteInfo(data.id);
      break;
  }
};

// 获取资讯列表
const getCarouselList = (id) => {
  inquiriesApi
    .getInquiries(id)
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        if (id) {
          state.form = res.data?.result[0];
          return;
        }
        state.data = res.data?.result;
        state.pagination.total = res.data?.result.length;
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }

      state.searchLoading = false;
    })
    .catch((err) => {
      console.log(err);
      Message.error({
        content: err.msg,
        position: "top",
      });
    });
};
getCarouselList(null);
// 删除
const deleteInfo = (id) => {
  inquiriesApi
    .deleteData({ id })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        Message.success({
          content: res.msg || "删除成功",
          position: "top",
        });
        getCarouselList(null);
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
.table {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .search {
    width: 100%;
    padding: 20px 0;
  }
}
</style>
